<template>
  <!-- 头部 -->
  <view class="codeFills">
    <uni-nav-bar title="扫码加注" color="#333" left-icon="left" @clickLeft="redirectTo('index/filling')"
      statusBar></uni-nav-bar>
    <!-- 环境提示 -->
    <environment></environment>
    <!-- 安蓝头部标题 -->
    <CodeTop></CodeTop>
    <!-- 金额显示 -->
    <view class="package">
      <PriceList :fill_price="fillingAll.price" :vip_price="fillingAll.vip_price" :locationName="positionText.name"
        :type="'investors'" :unionId="fillingAll.union_id" :PaymentMethod="PaymentMethod"></PriceList>
    </view>
    <!-- 自定义加注金额 -->
    <CodeFilli :wechat_price="fillingAll.price" :money_price="fillingAll.vip_price" :wechat_amount="mouchAll.count"
      :money_amount="mouchAll.vip_count" :num="num" @activeTab="activeTab" @getdrivers="getdrivers" ref="CodeFilliRef"
      @payForSub="payForSub" :code="positionText.code" @payForSubRecharge="payForSubRecharge"></CodeFilli>
    <!-- 底部支付 -->
    <CodeFilliBot :num="num" :union_id="fillingAll.union_id" :state="'investors'" :from_id="from_id" ref="disbursement"
      @getdrivers="getdrivers" :fillamount="mouchAll.count" :code="positionText.code">
    </CodeFilliBot>
    <!-- 微信分享 -->
    <webWechat></webWechat>
  </view>
</template>

<script setup lang="ts">
  import CodeTop from '@c/canCode/codeTop.vue';
  import { getDriverID } from '@/stores/driverID';
  import { redirectTo, navBack, navTo } from '@/utils/navigator';
  import { showLoading, errorToast } from '@/utils/prompt';
  import PriceList from '@c/canCode/priceList.vue';
  import environment from '@c/pobulic/environment.vue';
  import webWechat from '@c/pobulic/webWechat.vue';
  import CodeFilli from '@c/canCode/CodeFilli.vue';
  import CodeFilliBot from '@c/canCode/CodeFilliBot.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { GetCities } from '@/gql/team';
  import { custo, fillingListA } from '@/gql/filling';
  import { toPublish } from '@mqtt';
  import { Ref, ref } from 'vue';
  /**
   * @component
   * @desc 散户加注页面
   * @property {Number} driver_id 用户ID
   * @property {Object} fillingAll 单价及加注机信息
   * @property {Number} num 用户加注金额
   * @property {Object} mouchAll 用户支付金额及加注量
   * @property {Object} positionText 当前城市的code值及城市名
   * @property {Number} from_id //待支付人ID
   * @property {Null} CodeFilliRef //自定义加注金额值
   * @property {Null} disbursement 底部栏支付
   * @property {String} PaymentMethod 支付方式
   */
  // static
  const driver_id = getDriverID();
  const fillingAll : Ref<any> = ref({});
  // data
  const num = ref(15);
  const mouchAll : Ref<any> = ref({});
  const positionText : Ref<any> = ref({});
  const from_id = ref(0); //待支付人ID
  // refs
  const CodeFilliRef = ref(null);
  const disbursement = ref(null)
  const PaymentMethod = ref('')
  onLoad(() => {
    fillLists();
    position()
  });
  /**
   * 获取根据当前加注机经纬度的城市信息
   */
  function position() {
    const payload = {
      query: GetCities,
      variables: {
        fill_id: uni.getStorageSync('fillingID').toString(),
      },
    };
    toPublish('ql/team/getCity', payload, (obj : any) => {
      uni.hideLoading();
      const { data } = obj;
      positionText.value = data.get_city;
    });
  }
  /**
   * 获取加注机详情
   */
  function fillLists() {
    showLoading('加载中');
    const fillID = uni.getStorageSync('fillingID');
    if (!fillID) {
      errorToast('扫码失败 请重新扫描');
      setTimeout(() => {
        navBack();
      }, 1000);
      return;
    }
    const payload = {
      query: fillingListA,
      variables: {
        driver_id,
        id: fillID.toString(),
      },
    };
    toPublish('ql/driver/getFilling', payload, (obj : any) => {
      uni.hideLoading();
      const { fill } = obj.data;
      fillingAll.value = fill;
      uni.setStorageSync('fillingID', fill.id);
      uni.setStorageSync('jzjfilling', fill.imsi);
      setTimeout(() => {
        getdrivers(15);
      }, 300);
    });
  }
  /**
   * 获取单价及加注量
   * @param {Number} money 加注金额
   */
  function getdrivers(money : number) {
    if (!fillingAll.value.price) {
      return
    }
    showLoading();
    CodeFilliRef.value.num = money
    mouchAll.value.count = 0
    const payload = {
      query: custo,
      variables: {
        type: 'quota',
        fill_price: fillingAll.value.price,
        price: money,
        count: 0,
        vip_price: fillingAll.value.vip_price,
      },
    };
    toPublish('ql/driver/RetailCalculation', payload, (obj : any) => {
      const get_jisuan = obj.data.get_jisuan;
      mouchAll.value = get_jisuan;
      num.value = money;
      if (money === 15) {
        CodeFilliRef.value.customLists()
      } else {
        setTimeout(() => {
          CodeFilliRef.value.bindChange()
        }, 100)
      }
      return
    });
  }
  /**
   * 选择代付款人
   * @param {Number} num 代付款人ID
   * @param {String} type 付款方式
   */
  function activeTab(num : number, type : string) {
    PaymentMethod.value = type
    from_id.value = num;
  }
  /**
   * 提交支付
   * @param {Object} type 支付方式
   * @param {Object} amount 加注量
   * @param {Object} price 加注单价
   */
  function payForSub(type : string, amount : number, price : number, text : any) {
    console.log('------------')
    if (text === 'Recharge') {
      navTo('mine/Recharge?amount=' + amount + '&price=' + price + '&union_id=' + fillingAll.value.union_id + '&state=investors'+'&money=' + num.value)
    } else {
      showLoading();
      disbursement.value.submit(type, amount, price)
    }
  }
</script>

<style lang="less"></style>
<style>
  .codeFills>>>.uni-popup__wrapper {
    border-radius: 5px !important;
  }
</style>